<template>
  <div class="app-container">
    <!--工具栏-->
	<el-button class="filter-item" size="mini" type="success" icon="el-icon-back"  @click="back">返回</el-button>	
	<div class="head_title">担保合同信息</div>
    <div class="head-container">
      <!-- 搜索 -->
      <!-- <el-input v-model="query.value" clearable placeholder="输入岗位名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
      <el-select v-model="query.enabled" clearable placeholder="状态" class="filter-item" style="width: 90px" @change="toQuery">
        <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button> -->
      <!-- 新增 -->
      <div v-permission="['ADMIN','USERJOB_ALL','USERJOB_CREATE']" style="display: inline-block;margin: 0px 2px;">
        <!-- <el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="add">新增</el-button> -->
		<el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon=""
          @click="edit">担保合同详情</el-button>
      </div>
    </div>
    <!--表单组件-->
    <eForm ref="form" :is-add="isAdd" :dicts="dicts"/>
    <!--表格渲染-->
    <el-table v-loading="reqLoading" :data="data" size="small" style="width: 100%;" @selection-change="handleSelectionChange"  @row-click="rowClick">
	  <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="guarContraNum" label="担保合同编号"/>
	  <el-table-column prop="guaranteeMode" label="担保方式"/>
	  <el-table-column prop="guaranteer" label="担保人"/>
	  <el-table-column prop="guaranteeAmount" label="担保总金额"/>
	  <el-table-column prop="currency" label="币种"/>
	  <el-table-column prop="registrant" label="登记人"/>
	  <el-table-column prop="registrantDept" label="登记机构"/>
    </el-table>
    <!--分页组件-->
    <!-- <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/> -->


     <el-dialog :visible.sync="dialog" title="担保合同详情" append-to-body width="1200px">
		  <el-form ref="formm"  :model="formm"  size="small" label-width="150px">
			      <el-form-item label="担保合同编号" style="display:inline-block;width:48%;">
						<el-input v-model="formm.guarContraNum" style="width: 370px;"/>
				 </el-form-item>
				  <el-form-item label="担保类型" style="display:inline-block;width:48%;">
						<el-input v-model="formm.guaranteeType" style="width: 370px;"/>
				 </el-form-item>
				 <el-form-item label="担保方式" style="display:inline-block;width:48%;">
						<el-input v-model="formm.guaranteeMode" style="width: 370px;"/>
				 </el-form-item>
				  <el-form-item label="担保人" style="display:inline-block;width:48%;">
						<el-input v-model="formm.guaranteer" style="width: 370px;"/>
				 </el-form-item>
                  <el-form-item label="币种" style="display:inline-block;width:48%;">
						<el-input v-model="formm.currency" style="width: 370px;"/>
				 </el-form-item>
				 <el-form-item label="担保总金额" style="display:inline-block;width:48%;">
						<el-input v-model="formm.guaranteeAmount" style="width: 370px;"/>
				 </el-form-item>
				 <el-form-item label="备注" style="display:inline-block;width:95%;">
						<el-input type="textarea" v-model="formm.remark" style="width:930PX;"/>
				 </el-form-item>
				 <el-form-item label="录入人" style="display:inline-block;width:48%;">
						<el-input v-model="formm.registrant" style="width: 370px;"/>
				 </el-form-item>
				 <el-form-item label="录入机构" style="display:inline-block;width:48%;">
						<el-input v-model="formm.registrantDept" style="width: 370px;"/>
				 </el-form-item>
				 <el-form-item label="录入时间" style="display:inline-block;width:48%;">
						<el-form-item prop="date1">
								<el-date-picker  type="date"  v-model="formm.registrantTime" style="width: 370px;" ></el-date-picker>
						</el-form-item>			
				</el-form-item>
				<el-form-item label="更新人" style="display:inline-block;width:48%;">
						<el-input v-model="formm.updateUser" style="width: 370px;"/>
				 </el-form-item>
				 <el-form-item label="更新机构" style="display:inline-block;width:48%;">
						<el-input v-model="formm.updateDept" style="width: 370px;"/>
				 </el-form-item>
				  <el-form-item label="更新时间" style="display:inline-block;width:48%;">
						<el-form-item prop="date1">
								<el-date-picker  type="date"  v-model="formm.updateTime" style="width: 370px;" ></el-date-picker>
						</el-form-item>			
				 </el-form-item>
           </el-form>
		    <div slot="footer" class="dialog-footer">
				<el-button  type="primary" @click="close">关闭</el-button>
			</div>
     </el-dialog>

        <div   v-if="collateralFlag" style="margin-top:50px">

                <div class="head-container">
					<div v-permission="['ADMIN','USERJOB_ALL','USERJOB_CREATE']" style="display: inline-block;margin: 0px 2px;">
						<el-button
						class="filter-item"
						size="mini"
						type="primary"
						icon=""
						@click="viewCollarterals">押品详情</el-button>
					</div>
				</div>
			 <el-table v-loading="reqLoading" :data="collData" size="small" style="width: 100%;" @selection-change="select" >
				  <el-table-column type="selection" width="50"></el-table-column>
				  <el-table-column prop="collateralNum" label="抵质押物编号"/>
				  <el-table-column prop="collateralPeople" label="抵质押人名称"/>
				  <el-table-column prop="warrantNo" label="权证编号"/>
				  <el-table-column prop="collateralAmount" label="抵质押金额"/>
				  <el-table-column prop="currency" label="币种"/>
				  <el-table-column prop="registrant" label="登记人"/>
				  <el-table-column prop="registrantDept" label="登记机构"/>
			  </el-table>

			  <el-dialog :visible.sync="collateralDialog" title="押品详情" append-to-body width="1200px">
				      <el-form ref="forms"  :model="forms"  size="small" label-width="150px">
							<el-form-item label="抵质押物编号" style="display:inline-block;width:48%;">
								<el-input v-model="forms.collateralNum" style="width: 370px;"/>
							</el-form-item>
							<el-form-item label="抵质押人名称" style="display:inline-block;width:48%;">
								<el-input v-model="forms.collateralPeople" style="width: 370px;"/>
							</el-form-item>
							<el-form-item label="权证编号" style="display:inline-block;width:48%;">
								<el-input v-model="forms.warrantNo" style="width: 370px;"/>
							</el-form-item>
							<el-form-item label="抵质押金额" style="display:inline-block;width:48%;">
								<el-input v-model="forms.collateralAmount" style="width: 370px;"/>
							</el-form-item>
							<el-form-item label="币种" style="display:inline-block;width:48%;">
								<el-input v-model="forms.currency" style="width: 370px;"/>
							</el-form-item>
							<el-form-item label="房产类型" style="display:inline-block;width:48%;">
								<el-input v-model="forms.houseType" style="width: 370px;"/>
							</el-form-item>
							<el-form-item label="房屋详细地址" style="display:inline-block;width:48%;">
								<el-input v-model="forms.houseAddr" style="width: 370px;"/>
							</el-form-item>
							<el-form-item label="建筑面积" style="display:inline-block;width:48%;">
								<el-input v-model="forms.houseArea" style="width: 370px;"/>
							</el-form-item>
							<el-form-item label="价值评估机构名称" style="display:inline-block;width:48%;">
								<el-input v-model="forms.valAgencyName" style="width: 370px;"/>
							</el-form-item>
							 <el-form-item label="价值评估时间" style="display:inline-block;width:48%;">
									<el-form-item prop="date1">
											<el-date-picker  type="date"  v-model="forms.valAgencyTime" style="width: 370px;" ></el-date-picker>
									</el-form-item>			
							</el-form-item>
							<el-form-item label="抵质押物评估价值" style="display:inline-block;width:48%;">
								<el-input v-model="forms.collateralValuation" style="width: 370px;"/>
							</el-form-item>
							<el-form-item label="抵质押物认定价值" style="display:inline-block;width:48%;">
								<el-input v-model="forms.collateralValDefine" style="width: 370px;"/>
							</el-form-item>
							<el-form-item label="备注" style="display:inline-block;width:95%;">
									<el-input type="textarea" v-model="forms.remark" style="width:930PX;"/>
							</el-form-item>
							<el-form-item label="录入人" style="display:inline-block;width:48%;">
								<el-input v-model="forms.registrant" style="width: 370px;"/>
							</el-form-item>
							<el-form-item label="录入机构" style="display:inline-block;width:48%;">
								<el-input v-model="forms.registrantDept" style="width: 370px;"/>
							</el-form-item>
                            <el-form-item label="录入时间" style="display:inline-block;width:48%;">
									<el-form-item prop="date1">
											<el-date-picker  type="date"  v-model="forms.registrantTime" style="width: 370px;" ></el-date-picker>
									</el-form-item>			
							</el-form-item>
                            <el-form-item label="更新人" style="display:inline-block;width:48%;">
								<el-input v-model="forms.updateUser" style="width: 370px;"/>
							</el-form-item>
                            <el-form-item label="更新机构" style="display:inline-block;width:48%;">
								<el-input v-model="forms.updateDept" style="width: 370px;"/>
							</el-form-item>
							<el-form-item label="更新时间" style="display:inline-block;width:48%;">
									<el-form-item prop="date1">
											<el-date-picker  type="date"  v-model="forms.updateTime" style="width: 370px;" ></el-date-picker>
									</el-form-item>			
							</el-form-item>
				      </el-form>
					  <div slot="footer" class="dialog-footer">
							<el-button  type="primary" @click="closeCollateral">关闭</el-button>
					  </div>
			  </el-dialog>
		</div>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import { executive,executiveDetails} from '@/api/custComBaseinfo'
import { assure , assureDetails, collateral , collateralDetails} from '@/api/loanManageInfo'
import initData from '@/mixins/initData'
import initDict from '@/mixins/initDict'
import { del } from '@/api/job'
import { parseTime } from '@/utils/index'
import eForm from './form'
export default {
  components: { eForm },
  mixins: [initData, initDict],
  data() {
    return {
	  delLoading: false,
	  reqLoading:true,
	  dialog:false,
      collateralDialog:false,

      enabledTypeOptions: [
        { key: 'true', display_name: '正常' },
        { key: 'false', display_name: '禁用' }
	  ],
	  reqForm:{
		//	page: 0, 
		//	size: 10,
		//	sort:'id,desc',
			//id:''
			contractNo:''
	  },
	  id:'',
	  ids:[],
      collId:'',
	  collIds:[],
	  temCollIds:[],
      temIds:[],

	  data:[],

	  collData:[],

	  collForm:{
          guaranteeNo:''
	  },
      collateralFlag:false,

	  details:{},
	  forms:{
		 collateralNum:'',
		 collateralPeople:'',
		 warrantNo:'',
		 collateralAmount:'',
		 currency:'',
		 houseType:'',
		 houseAddr:'',
		 houseArea:'',
		 valAgencyName:'',
		 valAgencyTime:'',
		 collateralValuation:'',
		 collateralValDefine:'',
		 remark:'',
		 registrant:'',
		 registrantDept:'',
		 registrantTime:'',
		 updateUser:'',
		 updateDept:'',
		 updateTime:''
	  },
	  formm:{
		  post:'',
		  certificateType:'',
		  certificateNo:'',
		  name:'',
		  education:'',
		  workHistory:'',
		  phone:'',
		  serviceYears:'',
		  practiceYears:'',
		  shareHoldCase:'',
		  isEffective:'',
		  registerUser:'',
		  registerOrg:'',
		  registerDate:'',
		  updateDate:'',

		  
		  

		  guarContraNum:'',
		  guaranteeType:'',
		  guaranteeMode:'',
		  guaranteer:'',
		  currency:'',
		  guaranteeAmount:'',
		  remark:'',
		  registrant:'',
		  registrantDept:'',
		  registrantTime:'',
		  updateUser:'',
		  updateDept:'',
		  updateTime:''


	  }
    }
  },
  created() {
    	setTimeout(() => {
			  this.reqForm.contractNo = sessionStorage.getItem('contractNo')
			    assure(this.reqForm).then(res => {
					//this.total = res.totalElements
					//this.data = res.content
					this.data = res
					setTimeout(() => {
						this.reqLoading = false
					}, 170)
				}).catch(err => {
					this.reqLoading = false
					console.log(err.response.data.message)
				})

		}, 500)





    this.$nextTick(() => {
      //this.init()
      // 加载数据字典
      this.getDict('job_status')
    })
  },
  methods: {
    parseTime,
    checkPermission,
    beforeInit() {
	  this.url = 'api/job'
	 // this.url = '/api/custComBaseinfo/custComShareholderInfo'
      const sort = 'sort,asc'
      this.params = { page: this.page, size: this.size, sort: sort }
      const query = this.query
      const value = query.value
      const enabled = query.enabled
      if (value) { this.params['name'] = value }
      if (enabled !== '' && enabled !== null) { this.params['enabled'] = enabled }
      return true
    },
    subDelete(id) {
      this.delLoading = true
      del(id).then(res => {
        this.delLoading = false
        this.$refs[id].doClose()
        this.dleChangePage()
        this.init()
        this.$notify({
          title: '删除成功',
          type: 'success',
          duration: 2500
        })
      }).catch(err => {
        this.delLoading = false
        this.$refs[id].doClose()
        console.log(err.response.data.message)
      })
	},
	handleSelectionChange(val) {
		  console.log('val',val)
		   val.forEach((v) => {
               this.ids.push(v.id)
		   });
		   console.log('ids',this.ids)
		   this.temIds = this.ids
		   this.id = this.ids.toString()
		   this.ids = []
	},
	select(val){
		console.log('val------',val)
		   val.forEach((v) => {
               this.collIds.push(v.id)
		   });
		   console.log('collIds',this.collIds)
		   this.temCollIds = this.collIds
		   this.collId = this.collIds.toString()
		   this.collIds = []
	},
	close(){
		this.dialog = false;
	},
	closeCollateral(){
		this.collateralDialog = false;
	},
    add() {
      this.isAdd = true
      this.$refs.form.getDepts()
      this.$refs.form.dialog = true
	},
	back(){
		 this.$router.go(-1)
	},
	rowClick(row, column, event){
		console.log('row',row.id)
		this.collForm.guaranteeNo = row.guarContraNum
		
		
		collateral(this.collForm).then(res => {
					//this.total = res.totalElements
					//this.data = res.content
					this.collData = res
					this.collateralFlag = true
					setTimeout(() => {
						this.reqLoading = false
					}, 170)
				}).catch(err => {
					this.reqLoading = false
					console.log(err.response.data.message)
		})
	},
	viewCollarterals(){
       	  if(this.collId == ''){
		     this.$message.warning('请先选择某一项！')
		      return;
		  }
		  if(this.temCollIds.length>=2){
				this.$message.warning('只能选择一项！')
				return;
		  }
          console.log('this.collId------',this.collId)
          collateralDetails(this.collId).then(res => {
					// this.total = res.totalElements
					//this.data = res
					console.log('res',res)  
					this.collateralDialog = true;
					this.forms={
						collateralNum:res.collateralNum,
						collateralPeople:res.collateralPeople,
						warrantNo:res.warrantNo,
						collateralAmount:res.collateralAmount,
						currency:res.currency,
						houseType:res.houseType,
						houseAddr:res.houseAddr,
						houseArea:res.houseArea,
						valAgencyName:res.valAgencyName,
						valAgencyTime:res.valAgencyTime,
						collateralValuation:res.collateralValuation,
						collateralValDefine:res.collateralValDefine,
						remark:res.remark,
						registrant:res.registrant,
						registrantDept:res.registrantDept,
						registrantTime:res.registrantTime,
						updateUser:res.updateUser,
						updateDept:res.updateDept,
						updateTime:res.updateTime

					}
					
					setTimeout(() => {
						this.reqLoading = false
					}, 170)
		  }).catch(err => {
					this.reqLoading = false
					console.log(err.response.data.message)
		   })

	},
    edit() {
	  console.log('this.id=======', this.id)
	  if(this.id == ''){
		  this.$message.warning('请先选择某一项！')
		  return;
	  }
	  if(this.temIds.length>=2){
		  this.$message.warning('只能选择一项！')
		  return;
	  }
	  sessionStorage.setItem('assureId',this.id)
       assureDetails(this.id).then(res => {
					// this.total = res.totalElements
					//this.data = res
					console.log('res',res)
                    this.formm ={
						guarContraNum:res.guarContraNum,
						guaranteeType:res.guaranteeType,
						guaranteeMode:res.guaranteeMode,
						guaranteer:res.guaranteer,
						currency:res.currency,
						guaranteeAmount:res.guaranteeAmount,
						remark:res.remark,
						registrant:res.registrant,
						registrantDept:res.registrantDept,
						registrantTime:res.registrantTime,
						updateUser:res.updateUser,
						updateDept:res.updateDept,
						updateTime:res.updateTime
					}


					// this.formm ={
					// 	post:res.post,
					// 	certificateType:res.certificateType,
					// 	certificateNo:res.certificateNo,
					// 	name:res.name,
					// 	education:res.education,
					// 	workHistory:res.workHistory,
					// 	phone:res.phone,
					// 	serviceYears:res.serviceYears,
					// 	practiceYears:res.practiceYears,
					// 	shareHoldCase:res.shareHoldCase,
					// 	isEffective:res.isEffective,
					// 	registerUser:res.registerUser,
					// 	registerOrg:res.registerOrg,
					// 	registerDate:res.registerDate,
					// 	updateDate:res.updateDate,
					// }
					// console.log('formmm',this.formm)
					setTimeout(() => {
						this.reqLoading = false
					}, 170)
		}).catch(err => {
					this.reqLoading = false
					console.log(err.response.data.message)
		})

        this.dialog = true;




    //   this.isAdd = false
	//   const _this = this.$refs.form




	//   console.log('data',this.data[0])
	   
    // _this.form = {
	// 		post:this.data[0].post,
	// 		certificateType: this.data[0].certificateType,
	// 		certificateNo: this.data[0].certificateNo,
	// 		name: this.data[0].name,
	// 		education: this.data[0].education,
	// 		workHistory: this.data[0].workHistory,
	// 		phone: this.data[0].phone,
	// 		serviceYears: this.data[0].serviceYears,
	// 		practiceYears: this.data[0].practiceYears,
	// 		shareHoldCase: this.data[0].shareHoldCase,
	// 		isEffective: this.data[0].isEffective,
	// 		registerUser: this.data[0].registerUser,
	// 		registerOrg: this.data[0].registerOrg,
	// 		registerDate: this.data[0].registerDate,
	// 		updateDate: this.data[0].updateDate,
			
			
			



	// 		sort: data.sort,
	// 		enabled: data.enabled.toString(),
	// 		createTime: data.createTime,
	// 		dept: { id: data.dept.id }
    //   }



    //   _this.getDepts()
    //   _this.form = {
    //     id: data.id,
    //     name: data.name,
    //     sort: data.sort,
    //     enabled: data.enabled.toString(),
    //     createTime: data.createTime,
    //     dept: { id: data.dept.id }
    //   }
    //   _this.deptId = data.dept.id
      //_this.dialog = true
    }








    // edit() {
	//   console.log('this.id', this.id)
	//   sessionStorage.setItem('executiveId',this.id)
    // //    executiveDetails(this.id).then(res => {
	// // 				// this.total = res.totalElements
	// // 				this.data = res
	// // 				setTimeout(() => {
	// // 					this.reqLoading = false
	// // 				}, 170)
	// // 	}).catch(err => {
	// // 				this.reqLoading = false
	// // 				console.log(err.response.data.message)
	// // 	})






    //   this.isAdd = false
	//   const _this = this.$refs.form

	// //   console.log('data',this.data[0])
	   
    // // _this.form = {
	// // 		post:this.data[0].post,
	// // 		certificateType: this.data[0].certificateType,
	// // 		certificateNo: this.data[0].certificateNo,
	// // 		name: this.data[0].name,
	// // 		education: this.data[0].education,
	// // 		workHistory: this.data[0].workHistory,
	// // 		phone: this.data[0].phone,
	// // 		serviceYears: this.data[0].serviceYears,
	// // 		practiceYears: this.data[0].practiceYears,
	// // 		shareHoldCase: this.data[0].shareHoldCase,
	// // 		isEffective: this.data[0].isEffective,
	// // 		registerUser: this.data[0].registerUser,
	// // 		registerOrg: this.data[0].registerOrg,
	// // 		registerDate: this.data[0].registerDate,
	// // 		updateDate: this.data[0].updateDate,
			
			
			



	// // 		sort: data.sort,
	// // 		enabled: data.enabled.toString(),
	// // 		createTime: data.createTime,
	// // 		dept: { id: data.dept.id }
    // //   }



    // //   _this.getDepts()
    // //   _this.form = {
    // //     id: data.id,
    // //     name: data.name,
    // //     sort: data.sort,
    // //     enabled: data.enabled.toString(),
    // //     createTime: data.createTime,
    // //     dept: { id: data.dept.id }
    // //   }
    // //   _this.deptId = data.dept.id
    //   _this.dialog = true
    // }
  }
}
</script>

<style scoped>
   .head_title{
     height:40px;line-height:40px;border-bottom: 2px solid #ce2731;color:#ce2731;margin-bottom: 30px;
   }
</style>
